<!-- 编辑名片 -->
<template>
	<view class="card-editor" :style="{ '--color': vuex_config.themeColor1 }">
		<view class="bg-login" v-if="!vuex_token" @click="onToken"></view>
		<view class="editor">
			<view class="editor-item">
				<view class="" style="width: 200rpx;">*图片</view>
				<view class="editor-item-t" @click="uploadimg(1)">
					<image class="editor-img" :style="{ backgroundColor: form.logo ? '' : '#f5f5f5' }" :src="form.logo"
						mode=""></image>
				</view>
			</view>
			<view class="editor-item">
				<view class="" style="width: 200rpx;">*公司名称</view>
				<view class="editor-item-t">
					<u-input class="cont" v-model="form.company" @input="nameChange" input-align="right"
						placeholder="请输入公司名称" :clearable="false" />
				</view>
			</view>
			<view class="editor-item">
				<view class="" style="width: 200rpx;">*所在职位</view>
				<view class="editor-item-t">
					<u-input class="cont" v-model="form.duties" input-align="right" placeholder="请输入所在职位"
						:clearable="false" />
				</view>
			</view>
			<view class="editor-item">
				<view class="" style="width: 200rpx;">*姓名</view>
				<view class="editor-item-t">
					<u-input class="cont" adjust-position v-model="form.name" input-align="right" placeholder="请输入姓名"
						:clearable="false" />
				</view>
			</view>
			<view class="editor-item">
				<view class="" style="width: 200rpx;">*电话</view>
				<view class="editor-item-t">
					<u-input class="cont" v-model="form.phone" input-align="right" type="number" placeholder="请输入电话"
						:clearable="false" />
				</view>
			</view>
			<view class="editor-item">
				<view class="" style="width: 200rpx;">*QQ</view>
				<view class="editor-item-t">
					<u-input class="cont" v-model="form.qq" input-align="right" type="number" placeholder="请输入QQ"
						:clearable="false" />
				</view>
			</view>
			<view class="editor-item">
				<view class="" style="width: 200rpx;">*微信</view>
				<view class="editor-item-t">
					<u-input class="cont" v-model="form.weixin" input-align="right" placeholder="请输入微信"
						:clearable="false" />
				</view>
			</view>
			<view class="editor-item">
				<view class="" style="width: 200rpx;">*邮箱</view>
				<view class="editor-item-t">
					<u-input class="cont" v-model="form.email" input-align="right" placeholder="请输入邮箱"
						:clearable="false" />
				</view>
			</view>
			<view class="editor-item">
				<view class="" style="width: 200rpx;">*公司地址</view>
				<view class="editor-item-t">
					<view class="u-flex cont">
						<input type="text" v-model="form.address" class="edi-adress" placeholder="请输入公司地址" />
						<u-icon class="r_icon" @click="openMap" name="e768" size="32" color="#777777"
							custom-prefix="iconfont"></u-icon>
					</view>
				</view>
			</view>
			<view class="editor-item" @click="onSele">
				<view class="" style="width: 200rpx;">选择模板</view>
				<view class="editor-item-t">
					<view class="u-flex cont">
						<view class="edi-adress text_r">{{ cardClass(style) }}</view>
						<u-icon class="r_icon" name="arrow-right" color="rgb(192, 196, 204)" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="profile">
			<view class="profile-item">
				<view class="profile-title">公司介绍</view>
				<editor id="editor" class="ql-container" placeholder="例如：公司企业文化" @input="editorInputr"></editor>
			</view>
		</view>
		<view class="upload-video">
			<view class="upload-video-item">
				<view class="upload-deo">上传视频</view>
				<view class="again-upload" @click="uploadVideo">重新上传</view>
			</view>
			<view class="video-image">
				<view class="video-image" v-if="form.video == '' ? true : false" @click="uploadVideo">
					<u-icon name="e623" custom-prefix="iconfont" size="80" color="#00A6F8"></u-icon>
				</view>
				<video id="myVideo" :src="form.video" :danmu-btn="false" enable-play-gesture controls v-else
					object-fit="fill"></video>
			</view>
		</view>

		<view class="upload-video">
			<view class="upload-video-item">
				<view class="upload-deo">上传图片</view>
			</view>
			<view class="u-flex upload-image">
				<view class="upload-img" v-for="(i, index) in imgList" :key="index">
					<image style="width: 100%;height:100%" :src="i" mode="aspectFill"></image>
					<view class="upload-dele" @click="deleImg(index)">
						<view class="upload-dele-icon">X</view>
					</view>
				</view>
				<view class="upload-img" @click="uploadimg(2)">
					<u-icon name="e623" custom-prefix="iconfont" size="40" color="#00A6F8"></u-icon>
				</view>
			</view>
		</view>

		<view class="save_relative"></view>
		<view class="upload-save">
			<view class="save" @click="determineSave">{{ vuex_token ? btnTitle : '创建名片' }}</view>
		</view>
		<sww-login></sww-login>
	</view>
</template>

<script>
	import {
		email,
		isMobile
	} from '@/utils/validate';
	import {
		uniToast,
		uniChooseLocation,
		uniModal
	} from '@/utils/uniPromise.js';
	import {
		uploadVideo,
		uploadImage
	} from '@/utils/upload';
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				hasUserTemplate: false,
				editorCtx: '',
				btnTitle: '',
				rules: {
					name: {
						message: '请输入姓名'
					},
					logo: {
						message: '请添加logo'
					},
					phone: {
						message: '请输入手机号',
						tagEessage: '请输入正确手机号',
						validator: isMobile
					},
					company: {
						message: '请输入公司'
					},
					duties: {
						message: '请输入职位'
					},
					email: {
						message: '请输入邮箱',
						validator: email,
						tagEessage: '请输入正确邮箱'
					},
					weixin: {
						message: '请输入微信号'
					},
					address: {
						message: '请输入地址'
					},
					qq: {
						message: '请输入QQ'
					}
				},
				form: {
					logo: '', //背景图
					name: '', //姓名
					phone: '', //电话
					company: '', //公司
					duties: '', //职位
					industry: '', //行业
					address: '', //地址
					coordinate: '', //坐标
					qq: '',
					weixin: '',
					email: '',
					mode: '1',
					introduce: '', //公司介绍
					video: '',
					img: '', //底部上传图片字符串集合以','隔开
				},
				style: '0',
				imgList: [], //底部上传图片数组
				focus: false
			};
		},

		computed: {
			...mapState(['vuex_token']),
			cardClass(name) {
				return function(name) {
					switch (name) {
						case '0':
							return '默认风格';
						case '1':
							return '蓝色风格';
						case '2':
							return '黄色风格';
						case '3':
							return '橙色风格';
						case '4':
							return '绿色风格';
						case '5':
							return '棕色风格';
					}
				};
			}
		},

		created: function() {
			this.initPage();
		},

		methods: {
			onSele() {
				let $this = this;
				uni.showActionSheet({
					itemList: ['默认风格', '蓝色风格', '黄色风格', '橙色风格', '绿色风格', '棕色风格'],
					success: function(res) {
						$this.style = res.tapIndex + '';
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},

			// 获取最新用户信息
			...mapActions(['loadUserInfo']),
			initPage() {
				this.$login('initPage').then(() => {
					this.$emit('initLogin')
					let bol = !this.vuex_user.card_id || this.vuex_user.card_id == -1;
					this.btnTitle = bol ? '创建名片' : '保存编辑';
					this.$resPost('GetCallingCardList', {
						pk_id: this.vuex_user.card_id != -1 ? this.vuex_user.card_id : ''
					}).then(({
						data
					}) => {
						if (data[0]) {
							this.style = data[0].style;
							if (data[0].img) {
								data[0].img.split(',').forEach(el => {
									this.imgList.push(el);
								});
							}

							this.form = data[0] || {};
							uni.createSelectorQuery()
								.in(this)
								.select('#editor')
								.context(res => {
									this.editorCtx = res.context;
									this.editorCtx.setContents({
										html: this.form.introduce
									});
									this.editorCtx.blur(); //不让富文本进来就聚焦
								})
								.exec();
						}
					});
				});
			},

			// 点击公司地址打开地图
			openMap() {
				uniChooseLocation().then(res => {
					this.form.address = res.address;
				});
			},
			onToken() {
				this.$login('initPage');
			},
			// 上传视频
			uploadVideo() {
				uni.showLoading({
					mask: true,
					title: '正在上传视频'
				});
				uploadVideo()
					.then(res => {
						this.$set(this.form, 'video', res[0].url);
						this.onUploadMessage('上传视频成功');
					})
					.catch((err) => {
						if (!err) {
							this.onUploadMessage('上传视频失败');
						}
					});
			},

			// 上传文件提示
			onUploadMessage(title) {
				uni.hideLoading();
				uni.showToast({
					title,
					icon: 'none'
				});
			},

			// 上传图片
			uploadimg(len) {
				uni.showLoading({
					mask: true,
					title: '正在上传图片'
				});
				uploadImage()
					.then(res => {
						if (len == 1) {
							this.form.logo = res[0];
						} else {
							res.forEach((el, index) => {
								this.imgList.push(res[index]);
							});
						}
						this.onUploadMessage('上传图片成功');
					})
					.catch(() => {
						this.onUploadMessage('上传图片失败');
					});
			},

			// 富文本
			editorInputr(e) {
				this.form.introduce = e.detail.html;
			},

			// 点击保存 || 创建按钮
			determineSave() {
				this.$login('determineSave').then(res => {
					let $this = this;
					// this.verification（校验的数据，校验的规则）
					this.verification(this.form, this.rules).then(res => {
						if (res) {
							//将底部上传图片的数组以','隔开
							this.form.img = this.imgList.join(',');
							let obj = {
								...this.form,
								style: this.style
							};
							let json = JSON.stringify({
								introduce: this.form.introduce,
								img: this.form.img
							});
							delete obj.introduce;
							delete obj.img;
							this.$resPost(
								'SetCallingCard', {
									...obj
								},
								json
							).then(({
								data
							}) => {
								// 返回的是用户的card_id

								// if (data) {
								this.$u.vuex('vuex_user.card_id', data);
								uniToast('保存成功');
								setTimeout(() => {
									this.$emit('tabbarChange', 0);
									wx.hideToast();
								}, 500);
								// }
							});
						} else {}
					});
				});
			},

			// 删除图片
			deleImg(index) {
				uniModal({
					content: '是否删除图片'
				}).then(() => {
					this.imgList.splice(index, 1);
				});
			},

			// 表单验证
			verification(dataList, check) {
				let $this = this;
				return new Promise((resolve, reject) => {
					let arrLength = Object.keys(check).length; //拿到循环的次数
					let i = null; //用于判断对象最后一次循环
					for (let k in check) {
						i++;
						// 自定义验证方法
						if (typeof check[k].validator == 'function' && !check[k].validator(dataList[k])) {
							uniToast(check[k].tagEessage);
							resolve(false);
						}
						// 若其中一个值为空就返回一个false出去
						if (dataList[k] == '') {
							uniToast(check[k].message);
							resolve(false);
						}

						// 循环最后一次才触发
						if (i == arrLength) {
							resolve(true);
						}
					}
				});
			},
			//检测名称中是否包含  喜洋洋
			nameChange(value) {
				if (value && (value.includes('喜洋洋')) && !this.hasUserTemplate) {
					uni.showModal({
						title: '是否使用模板',
						success: (res) => {
							if (res.confirm) {
								this.hasUserTemplate = true
								this.getCardModel()
							}
						}

					})
				}
			},
			// 获取模板
			getCardModel() {
				this.$loading()
				this.$resPost('GetCallingCardList', {
					users_id: 646562
				}).then(({
					data
				}) => {
					if (data[0]) {
						if (data[0].img) {
							this.imgList = data[0].img.split(',');
						}
						// 此时页面上填写的内容并没有写到dataForm里面
						this.form = {
							...this.form,
							company: data[0].company,
							duties: data[0].duties,
							address: data[0].address,
							video: data[0].video,
						}
						this.style = data[0].style
						if (this.editorCtx) {
							this.editorCtx.setContents({
								html: data[0].introduce
							});
						} else {
							uni.createSelectorQuery()
								.in(this)
								.select('#editor')
								.context(res => {
									this.editorCtx = res.context;
									this.editorCtx.setContents({
										html: data[0].introduce
									});
								})
								.exec();
						}
					}
					this.$hide()
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.editor {
		padding: 12rpx 30rpx !important;
		background-color: #ffffff;
	}

	.editor-item {
		padding: 10rpx 0;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
		justify-content: space-between;
	}

	.editor-item:nth-last-of-type(1) {
		border: 0;
	}

	.editor-item-t {
		width: 100%;
		// flex: 1;
		height: 86rpx;
		display: flex;
		flex-direction: row-reverse;

		.cont {
			flex: 1;
			overflow: hidden;

			.edi-adress {
				flex: 1;
				overflow: hidden;
				margin-left: 6rpx;
				color: #303133;
			}

			.text_r {
				text-align: right;
			}
		}
	}

	.editor-img {
		width: 86rpx;
		height: 86rpx;
		border-radius: 50%;
	}

	/deep/ .u-form {
		width: 100%;
	}

	input {
		text-align: right;
	}

	.container {
		padding: 10px;
	}

	#editor {
		width: 100%;
		// height: 300px;
		line-height: 1.4;
		height: 600rpx;
	}

	.r_icon {
		margin-left: 4rpx;
		padding: 0 4px 0 20rpx;
	}

	/deep/ .u-input__input {
		height: 100%;
	}

	video {
		width: 100%;
		height: 100%;
	}

	#myVideo {
		width: 100%;
		height: 100%;
	}

	.upload-image {
		flex-wrap: wrap;
	}

	.upload-dele {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		top: 0;
		right: 0;

		.upload-dele-icon {
			color: #fff;
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: 35rpx;
			background-color: var(--color);
			font-size: 20rpx;
			font-weight: 700;
			opacity: 0.9;
			border-top-right-radius: 15rpx;
		}
	}

	.card-editor {
		width: 100%;
	}

	.editor {
		width: 100%;
	}

	.video-image {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(100% - 60rpx);
		margin: 0 30rpx;
		height: 388rpx;
		background-color: #f8f8f8;
	}

	.upload-video {
		background-color: #ffffff;
	}

	.upload-video-item {
		padding: 0 30rpx;
		margin-top: 15rpx;
		display: flex;
		height: 85rpx;
		line-height: 85rpx;
		font-size: 30rpx;
		justify-content: space-between;
	}

	.upload-img {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 200rpx;
		background-color: #f8f8f8;
		margin-left: 30rpx;
		margin-bottom: 40rpx;
		border-radius: 15rpx;
	}

	.upload-img image {
		border-radius: 15rpx;
	}

	.save_relative {
		display: none;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.upload-save {
		width: 100%;
		box-sizing: border-box;
		background-color: #ffffff;
		padding: 100rpx 30rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
		display: flex;
		align-items: center;
		justify-content: center;

		.save {
			width: 86%;
			background-color: var(--color);
			height: 76rpx;
			border-radius: 44rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
		}
	}

	.again-upload {
		font-size: 24rpx;
		color: #808cda;
	}

	.profile {
		margin-top: 15rpx;
		padding: 0 30rpx;
		background: #ffffff;
	}

	.profile-title {
		width: 100%;
		height: 85rpx;
		line-height: 85rpx;
		font-size: 30rpx;
	}

	.bg-login {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 20;
	}
</style>
